<form class="ui form">
    <div class="ui grid">
        <div class="ui row">
          <div class="three wide column">
            <div class="ui tiny vertical steps">
              <div class="step pointing"
                [class.active]="pipelineSection === 'pipeline'"
                (click)="pipelineSection = 'pipeline'">
                <i class="sitemap icon"></i>
                <div class="content">
                  <div class="title">{{'common_pipeline' | translate}} <i class="green check icon" *ngIf="node.context.pipeline_id"></i></div>
                </div>
              </div>
              <div class="step pointing"
                [class.disabled]="node == null || !node.context.pipeline_id"
                [class.active]="pipelineSection === 'application'"
                (click)="pipelineSection = 'application'">
                <i class="rocket icon"></i>
                <div class="content">
                  <div class="title">{{'common_application' | translate}} <i class="green check icon" *ngIf="node.context.application_id && node.context.application_id > 0"></i></div>
                  <div class="description">{{'action_optional' | translate}}</div>
                </div>
              </div>
              <div class="step pointing"
                [class.disabled]="node == null || !node.context.pipeline_id"
                [class.active]="pipelineSection === 'environment'"
                (click)="pipelineSection = 'environment'">
                <i class="tree icon"></i>
                <div class="content">
                  <div class="title">{{'common_environment' | translate}} <i class="green check icon" *ngIf="node.context.environment_id && node.context.environment_id > 0"></i></div>
                  <div class="description">{{'common_optional' | translate}}</div>
                </div>
              </div>
              <div class="step pointing"
                [class.disabled]="node == null || !node.context.pipeline_id || !node.context.application_id || (!loadingIntegrations && (!integrations || !integrations.length))"
                [class.active]="pipelineSection === 'integration'"
                (click)="pipelineSection = 'integration'">
                <i class="plug icon"></i>
                <div class="content">
                  <div class="title">{{'common_integration' | translate}} <i class="green check icon" *ngIf="node.context.project_integration_id && node.context.project_integration_id > 0"></i></div>
                  <div class="description">{{'common_optional' | translate}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="thirteen wide column">
            <ng-container [ngSwitch]="pipelineSection">
              <!-- ############### PIPELINE SECTION ############## -->
              <div *ngSwitchCase="'pipeline'">
                <div class="ui row mb20">
                  <div class="ui sixteen wide column">
                    <div class="two ui buttons">
                      <button class="ui button"
                        type="button"
                        [class.active]="!createNewPipeline" [class.blue]="!createNewPipeline"
                        [class.disabled]="!project.pipeline_names || !project.pipeline_names.length"
                        (click)="createNewPipeline = false">
                        {{'common_select' | translate}}
                      </button>
                      <button class="ui button" type="button" [class.active]="createNewPipeline" [class.blue]="createNewPipeline" (click)="createNewPipeline = true">
                        {{'common_create' | translate}}
                      </button>
                    </div>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <ng-container >
                      <div class="fields">
                        <div class="six wide field">
                            <label>{{'pipeline_name' | translate}}</label>
                            <ng-container *ngIf="!createNewPipeline">
                              <sm-select
                                  class="search"
                                  placeholder="{{ 'common_pipeline' | translate }}"
                                  [(model)]="node.context.pipeline_id"
                                  [options]="{'fullTextSearch': true}"
                                  id="WorkflowPipelineSelect">
                                  <option *ngFor="let p of project.pipeline_names" [value]="p.id">{{ p.name}}</option>
                              </sm-select>
                            </ng-container>
                            <ng-container *ngIf="createNewPipeline">
                              <input type="text" name="pipname" [(ngModel)]="newPipeline.name" [placeholder]="'pipeline_name_new' | translate">
                              <div class="ui error message" *ngIf="errorPipelineNamePattern">
                                  {{ 'pipeline_name_error' | translate }}
                              </div>
                            </ng-container>
                        </div>
                        <div class="ten wide field right aligned">
                          <div class="ui toggle checkbox ml10">
                            <input type="checkbox" id="mutex" name="mutex" [(ngModel)]="node.context.mutex">
                            <label for="mutex">
                              <a href="https://ovh.github.io/cds/docs/concepts/workflow/mutex" target="_blank">
                                {{ 'workflow_root_context_mutex' | translate }}
                                <i class="external icon"></i>
                              </a>
                            </label>
                          </div>
                        </div>
                      </div>
                    </ng-container>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <button class="ui button" type="button" (click)="goToProject()" *ngIf="!hideCancel">{{ 'btn_cancel' | translate }}</button>
                    <button class="ui right floated green button" type="button" (click)="goToNextSection().subscribe()"
                             *ngIf="!hideNext"
                            [disabled]="!node.context.pipeline_id && !newPipeline.name" [class.loading]="loadingCreatePipeline">
                            {{ 'btn_next' | translate }}
                    </button>
                  </div>
                </div>
              </div>
              <!-- ############### APPLICATION SECTION ############## -->
              <div *ngSwitchCase="'application'">
                <div class="ui row mb20">
                  <div class="ui sixteen wide column">
                    <div class="two ui buttons">
                      <button class="ui button"
                        type="button"
                        [class.active]="!createNewApplication" [class.blue]="!createNewApplication"
                        [class.disabled]="!project.application_names || !project.application_names.length"
                        (click)="createNewApplication = false">
                        {{'common_select' | translate}}
                      </button>
                      <button class="ui button" type="button" [class.active]="createNewApplication"  [class.blue]="createNewApplication" (click)="createNewApplication = true">
                        {{'common_create' | translate}}
                      </button>
                    </div>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <ng-container >
                      <div class="fields">
                        <div class="six wide field">
                            <label>{{'application_name' | translate}}</label>
                            <ng-container *ngIf="!createNewApplication">
                              <sm-select
                                  class="search"
                                  placeholder="{{ 'common_application' | translate }}"
                                  [(model)]="node.context.application_id"
                                  [options]="{'fullTextSearch': true}"
                                  id="WorkflowApplicationSelect">
                                  <option> </option>
                                  <option *ngFor="let a of applicationsName" [value]="a.id">{{ a.name }}</option>
                              </sm-select>
                            </ng-container>
                            <ng-container *ngIf="createNewApplication">
                              <input type="text" name="appname" [(ngModel)]="newApplication.name">
                              <div class="ui error message" *ngIf="errorPipelineNamePattern">
                                  {{ 'application_name_error' | translate }}
                              </div>
                            </ng-container>
                        </div>
                      </div>
                    </ng-container>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <button class="ui button" type="button" (click)="goToProject()" *ngIf="!hideCancel">{{ 'btn_cancel' | translate }}</button>
                    <button class="ui right floated green button" type="button" (click)="goToNextSection().subscribe()"
                            *ngIf="!hideNext"
                            [disabled]="!node.context.pipeline_id && !newPipeline.name" [class.loading]="loadingCreatePipeline">
                            {{ 'btn_next' | translate }}
                    </button>
                  </div>
                </div>
              </div>
              <!-- ############### ENVIRONMENT SECTION ############## -->
              <div *ngSwitchCase="'environment'">
                <div class="ui row mb20">
                  <div class="ui sixteen wide column">
                    <div class="two ui buttons">
                      <button class="ui button"
                        type="button"
                        [class.active]="!createNewEnvironment" [class.blue]="!createNewEnvironment"
                        [class.disabled]="!project.environments || !project.environments.length"
                        (click)="createNewEnvironment = false">
                        {{'common_select' | translate}}
                      </button>
                      <button class="ui button" type="button" [class.active]="createNewEnvironment" [class.blue]="createNewEnvironment" (click)="createNewEnvironment = true">
                        {{'common_create' | translate}}
                      </button>
                    </div>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <ng-container >
                      <div class="fields">
                        <div class="six wide field">
                            <label>{{'environment_name' | translate}}</label>
                            <ng-container *ngIf="!createNewEnvironment">
                              <sm-select
                                  class="search"
                                  placeholder="{{ 'common_environment' | translate }}"
                                  [(model)]="node.context.environment_id"
                                  [options]="{'fullTextSearch': true}"
                                  id="WorkflowEnvironmentSelect">
                                  <option> </option>
                                  <option *ngFor="let env of environmentsName" [value]="env.id">{{ env.name }}</option>
                              </sm-select>
                            </ng-container>
                            <ng-container *ngIf="createNewEnvironment">
                              <input type="text" name="envname" [(ngModel)]="newEnvironment.name">
                            </ng-container>
                        </div>
                      </div>
                    </ng-container>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <button class="ui button" type="button" (click)="goToProject()" *ngIf="!hideCancel">{{ 'btn_cancel' | translate }}</button>
                    <button class="ui right floated green button" type="button" *ngIf="!hideNext" (click)="goToNextSection().subscribe()"
                            [disabled]="!node.context.pipeline_id && !newPipeline.name" [class.loading]="loadingCreateEnvironment || loading">
                            <span *ngIf="node.context.application_id && (loadingIntegrations || (integrations && integrations.length))">{{ 'btn_next' | translate }}</span>
                            <span *ngIf="!node.context.application_id || (!loadingIntegrations && (!integrations || !integrations.length))">{{ 'btn_finish' | translate }}</span>
                    </button>
                  </div>
                </div>
              </div>
              <!-- ############### PLATFORM SECTION ############## -->
              <div *ngSwitchCase="'integration'">
                <div class="ui row">
                  <div class="ui sixteen wide column">
                      <div class="fields">
                        <div class="ui active centered inline loader" *ngIf="loadingIntegrations"></div>
                        <div class="six wide field" *ngIf="!loadingIntegrations">
                            <label>{{'common_integration' | translate}}</label>
                              <sm-select
                                  class="search"
                                  placeholder="{{ 'common_integration' | translate }}"
                                  [(model)]="node.context.project_integration_id"
                                  [options]="{'fullTextSearch': true}"
                                  id="WorkflowIntegrationSelect">
                                  <option> </option>
                                  <option *ngFor="let integration of integrations" [value]="integration.id">{{ integration.name }}</option>
                              </sm-select>
                        </div>
                      </div>
                  </div>
                </div>
                <div class="ui row">
                  <div class="ui sixteen wide column">
                    <button class="ui button" type="button" (click)="goToProject()" *ngIf="!hideCancel">{{ 'btn_cancel' | translate }}</button>
                    <button class="ui right floated green button" type="button" *ngIf="!hideNext" (click)="goToNextSection().subscribe()"
                            [disabled]="!node.context.pipeline_id && !newPipeline.name" [class.loading]="loading">
                            {{ 'btn_finish' | translate }}
                    </button>
                  </div>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
    </div>
</form>
